
<!--suppress ALL -->
<template>
  <div class="app-container">
    <el-form label-width="100px" style="width: 1200px">
      <el-form-item label="超链接名称">
        <el-input v-model="hyperlink.title" placeholder="超链接名称(随便填写)"/>
      </el-form-item>

      <el-form-item label="热度">
        <el-input-number v-model="hyperlink.sort" :min="0" :max="10000" controls-position="right" style="width: 130px"/>
      </el-form-item>

      <el-form-item label="超链接状态">
        <el-select v-model="hyperlink.state" placeholder="请选择" style="width: 96px">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="超链接">
        <el-input v-model="hyperlink.linkUrl" placeholder="超链接(需要链接的地址)"/>
      </el-form-item>

      <el-form-item>
        <el-button :disabled="saveBtnDisabled" type="primary" @click="addOrEidtHyperlink()">{{ addOrEidtArticleTitle }}</el-button>

        <a :href="hyperlink.linkUrl" target="_blank" style="margin-left: 50px">
          <el-button type="success">测试</el-button>
        </a>
      </el-form-item>

    </el-form>
  </div>
</template>

<script>
import hyperlinkApi from '@/api/hyperlink'

export default {
  data() {
    return {
      hyperlinkId: '',
      hyperlink: {
        title: '',
        linkUrl: '',
        sort: 0,
        state: 0
      },
      //状态选择下拉框
      options: [{
        value: 0,
        label: '未发布'
      }, {
        value: 1,
        label: '已发布'
      }],

      // 提交文字
      addOrEidtArticleTitle: "添加"
    }
  },

  created: function () {
    if (this.$route.params && this.$route.params.id) {
      this.addOrEidtArticleTitle = "修改"
      this.hyperlinkId = this.$route.params.id
      console.log("============路由id=============")
      console.log(this.$route.params.id)
      // 调用根据id查询方法
      this.getHyperlinkInfoById()
    }
  },

  watch: {
    $route(to, from) {
      this.hyperlink = {
        title: '',
        summary: '',
        content: '',
        sort: 0,
        state: 0
      }
    }
  },

  methods: {

    //根据id获取超链接信息
    getHyperlinkInfoById() {
      hyperlinkApi.getHyperlinkInfoById(this.hyperlinkId)
        .then(response => {
          this.hyperlink = response.data.hyperlink
          console.log("===========获取超链接===========")
          console.log(this.hyperlink)
        })
    },

    // 添加和修改超链接的方法
    addOrEidtHyperlink() {
      console.log("===========超链接状态===========")
      console.log(this.hyperlink)

      if (this.hyperlink.title === '') {
        this.$message({
          message: "超链接名不能为空",
          type: "warning"
        })
        return
      }
      if (this.hyperlink.linkUrl === '') {
        this.$message({
          message: "超链接不能为空",
          type: "warning"
        })
        return
      }

      //匹配是否以http和https开头
      if (!this.isHttpOrHttps(this.hyperlink.linkUrl)) {
        this.$message({
          type: 'warning',
          message: '链接地址应以http(s)开头！'
        })
        return;
      }

      //修改超链接
      if (this.hyperlinkId !== "") {
        this.$confirm('确定修改超链接?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          hyperlinkApi.updateHyperlink(this.hyperlink)
            .then(response => { // 修改成功
              // 提示信息
              this.$message({
                type: 'success',
                message: '修改超链接成功!'
              })
              // 回到列表页面 路由跳转
              this.$router.push({path: '/hyperlink/list'})
            })
        })
      } else {
        //添加li
        this.$confirm('确定添加超链接?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          //添加图片
          hyperlinkApi.addHyperlink(this.hyperlink)
            .then(response => { // 添加成功
              // 提示信息
              this.$message({
                type: 'success',
                message: '添加超链接成功!'
              })
              // 回到列表页面 路由跳转
              this.$router.push({path: '/hyperlink/list'})
            })
        })
      }
    },

    isURL(url) {
      var strRegex = "^((https|http|ftp|rtsp|mms)?://)"
        + "?(([0-9a-z_!~*'().&=+$%-]+: )?[0-9a-z_!~*'().&=+$%-]+@)?" //ftp的user@
        + "(([0-9]{1,3}\.){3}[0-9]{1,3}" // IP形式的URL- 199.194.52.184
        + "|" // 允许IP和DOMAIN（域名）
        + "([0-9a-z_!~*'()-]+\.)*" // 域名- www.
        + "([0-9a-z][0-9a-z-]{0,61})?[0-9a-z]\." // 二级域名
        + "[a-z]{2,6})" // first level domain- .com or .museum
        + "(:[0-9]{1,4})?" // 端口- :80
        + "((/?)|" // a slash isn't required if there is no file name
        + "(/[0-9a-z_!~*'().;?:@&=+$,%#-]+)+/?)$";
      var re = new RegExp(strRegex);

      if (re.test(url)) {
        return true;
      } else {
        return false;
      }
    },

    isHttpOrHttps(url) {
      var strRegex=/http(s)?:\/\/([\w-]+\.)+[\w-]+(\/[\w- .\/?%&=]*)?/;
      var re = new RegExp(strRegex);
      if (re.test(url)) {
        return true;
      } else {
        return false;
      }
    }
  }
}
</script>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
<style scoped>
.tinymce-container {
  line-height: 26px;
}
</style>
